<div class="ui-jqgrid">
	<div id="grid-pager"
		 class="ui-state-default ui-jqgrid-pager ui-corner-bottom" dir="ltr">
		<div id="pg_grid-pager" class="ui-pager-control" role="group">
			<table cellspacing="0" cellpadding="0" border="0" class="ui-pg-table"
				   style="width: 100%; table-layout: fixed; height: 100%;" role="row">
				<tbody>

				<tr>
					<td id="grid-pager_left" align="left"></td>
					<td id="grid-pager_center" align="center"
						style="white-space: pre; width: 343px;"><table
							cellspacing="0" cellpadding="0" border="0"
							style="table-layout: auto;" class="ui-pg-table">
						<tbody>
						<tr>
							<td id="first_grid-pager" onclick="showPage('firstPage')"
								class="ui-pg-button ui-corner-all <#if page?? && page.isFirstPage>ui-state-disabled</#if>"
								style="cursor: pointer;"><span
									class="ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
							<td id="prev_grid-pager" onclick="showPage('prePage')"
								class="ui-pg-button ui-corner-all <#if page?? && page.isFirstPage>ui-state-disabled</#if>"
								style="cursor: pointer;"><span
									class="ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
							<td dir="ltr">Page <input class="ui-pg-input" id="ui-pg-input" type="text"
													  size="2" maxlength="7" <#if page??>value="${page.pageNum!}"</#if> role="textbox"> of <span
									id="sp_1_grid-pager"><#if page??>${page.pages!}</#if></span></td>
							<td id="next_grid-pager" onclick="showPage('nextPage')" class="ui-pg-button ui-corner-all <#if page?? && page.isLastPage>ui-state-disabled</#if>"
								style="cursor: pointer;"><span
									class="ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
							<td id="last_grid-pager" onclick="showPage('lastPage')" class="ui-pg-button ui-corner-all <#if page?? && page.isLastPage>ui-state-disabled</#if>"
								style="cursor: pointer;"><span
									class="ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
						</tr>
						</tbody>
					</table></td>
					<td id="grid-pager_right" align="right"><div dir="ltr"
																 style="text-align: right" class="ui-paging-info">View <span id="page_view_left"><#if page??>${page.startRow!}</#if></span> -
						<span id="page_view_right"><#if page??>${page.endRow!}</#if></span> of <span id="page_view_total"><#if page??>${page.total!}</#if></span></div></td>
				</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
<script type="text/javascript">

    // 显示分页
    function setPage(result) {
        if (result.pages > 1) {
            $("#pageTotal").val(result.pages);
            $("#currentPage").val(result.pageNum);
            $("#pageSize").val(result.pageSize);

            $("#ui-pg-input").val(result.pageNum);
            $("#sp_1_grid-pager").html(result.pages);
            $("#page_view_left").html(result.startRow);
            $("#page_view_right").html(result.endRow);
            $("#page_view_total").html(result.total);

            if(result.isLastPage) {
                $("#last_grid-pager").addClass("ui-state-disabled");
                $("#next_grid-pager").addClass("ui-state-disabled");
            } else {
                $("#last_grid-pager").removeClass("ui-state-disabled");
                $("#next_grid-pager").removeClass("ui-state-disabled");
            }

            if(result.isFirstPage) {
                $("#first_grid-pager").addClass("ui-state-disabled");
                $("#prev_grid-pager").addClass("ui-state-disabled");
            } else {
                $("#first_grid-pager").removeClass("ui-state-disabled");
                $("#prev_grid-pager").removeClass("ui-state-disabled");
            }

            $(".ui-jqgrid").show();
        } else {
            $(".ui-jqgrid").hide();
        }
    }

    /**
     * 翻页到指定页数-同步(异步需重写)
     */
    var showPage = function(page,obj) {
        var objId = $(obj).attr("id");//当前按钮的id
        var pages = $("#sp_1_grid-pager").html();//总页数
        var pageNum = $(".ui-pg-input").val();//当前页
        if(pageNum == pages && pageNum == 1){
            return;
        }
        if(pageNum == pages){
            if(objId == "next_grid-pager" || objId == "last_grid-pager"){
                return;
            }
        }else if(pageNum == 1){
            if(objId == "prev_grid-pager" || objId == "first_grid-pager"){
                return;
            }
        }
        $("td").attr("onclick","");
        var action = $("#searchForm").attr("action");
        action = action + "?page=" + page;
        $("#searchForm").attr("action", action);
        $("#searchForm").submit();
    }

    /*
    $(".ui-pg-input").blur(function(){
        var objValue = $(".ui-pg-input").val();//文本框输入页数
        var pages = $("#sp_1_grid-pager").html();//总页数
        if(Number(objValue) > pages || Number(objValue) < 1){
            return;
        }
        $("td").attr("onclick","");
        var action = $("#searchForm").attr("action");
        action = action + "?page=" + objValue;
        $("#searchForm").attr("action", action);
        $("#searchForm").submit();
    });
    */
</script>